<template>
  <div class="computed">
    <div class="form-group-name">
      <label for="name">name</label>
      <input type="text" class="name" id="name" placeholder="name" v-model.trim="register.name">
    </div>
    <div class="form-group-age">
      <label for="age">age</label>
      <input type="text" class="age" id="age" placeholder="age" v-model.number="register.age">
    </div>
    <div class="form-group-sex">
      <input type="radio" id value="1" v-model="register.sex">男
      <input type="radio" id value="2" v-model="register.sex">女
    </div>
    <div class="form-group-email">
      <label for="name">email</label>
      <input type="text" class="email" id="email" placeholder="email" v-model="register.email">
    </div>
    <div class="form-group-phone">
      <label for="phone">phone</label>
      <input type="text" class="phone" id="phone" placeholder="phone" v-model="register.phone">
    </div>
    <button type="submit" class="btn" :disabled="isDisabled">Submit</button>
    <h1>{{isDisabled}}</h1>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      register: {
        name: "",
        age: "",
        sex: "1",
        email: "",
        phone:""
      }
    };
  },
  methods: {},
  components: {},
  computed: {
    isDisabled() {
      // 姓名长度在2-5之间
      let nameflag =
        this.register.name.length < 1 || this.register.name.length > 6;
      // 年龄验证0-100
      let ageflag = this.register.age < 0 || this.register.age > 100;
      // 性别验证
      let sexflag = this.register.sex == "";
      // 邮箱验证
      let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      let emailflag = !reg.test(this.register.email);
      // 手机验证
      let phoneReg=/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      let phoneflag=!phoneReg.test(this.register.phone)

      return nameflag || ageflag || sexflag || emailflag||phoneflag;
    }
  },
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
</style>